<template>
	<MkBillList ref="drawerRef">
		<MkQueryContainer>
			<template #header="">
				<MkInput label="关键字" @keyup.enter.native="search" v-model="searchParam.keyword" clearable="" />
				<el-form-item>
					<MkButtonQuery @click="search" />
				</el-form-item>
			</template>


			<MkTable :data="tableData" v-loading="loading" @row-dblclick="edit">
				<MkColumnIndex />
				<MkColumn prop="id" label="单号" />
				<MkColumn prop="danJuZhuangTai" label="单据状态" />
				<MkColumn prop="createTime" label="创建时间" />
				<MkColumn prop="createUserName" label="创建人" />
			</MkTable>

			<MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :totalCount="total"
				@query="search" />
		</MkQueryContainer>
	</MkBillList>
</template>

<script lang="ts" setup>
// 导入血型复核单相关的 API 和输出类型
import { TraFuHeInput, TraFuHeApi, TraFuHeOutput } from '/@/api/tra/TraFuHe';

// 导入分页查询的自定义钩子
import { usePageQuery } from '/@/hooks/usePageQuery';
// 导入自定义工具函数
import { clog, showSuccess } from '/@/utils';

// 定义一个引用，用于操作 MkBillList 组件实例
const drawerRef = ref();
// 定义组件的自定义事件，用于向外发送数据
const emits = defineEmits(['load']);
// 使用分页查询钩子获取搜索参数、总数、表格数据、加载状态和搜索方法
const { searchParam, total, tableData, loading, search } = usePageQuery<TraFuHeOutput>(TraFuHeApi.page);

// 组件挂载后触发搜索操作
onMounted(() => {
	search();
});

// 定义表格行双击或操作列点击时的编辑函数
const edit = (row: any) => {
	// 关闭 MkBillList 组件
	drawerRef.value?.close();
	// 触发自定义事件，传递当前行数据
	emits('load', row);
};

// 定义打开 MkBillList 组件的方法
const open = async () => {
	// 显示 MkBillList 组件
	console.log('leqaqin',drawerRef.value);
	drawerRef.value.show();
};

// 暴露 open 方法，供父组件调用
defineExpose({ open });
</script>

<style lang='scss' scoped></style>